﻿@page "/circular-gauge/labels"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates how to customize the ticks and labels of an axis. Position, offset, and height of the tick and label can be changed by using the options provided in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render and configure the ticks and labels of an axis in the circular gauge. Labels are units that are used to display the values in the axis.
      You can customize the labels with the properties like <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_Angle'>Angle</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.FontModel.html'>Font</a></code>,
       <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_Position'>Position</a></code>, and more. Ticks are used to mark some values on the axis. You can also customize the ticks using
       <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxis.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxis_MajorTicks'>CircularGaugeMajorTicks</a></code>,
       <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxis.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxis_MinorTicks'>CircularGaugeMinorTicks</a></code> properties.
    </p>
    <p>More information on the labels can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/axes'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge>
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="170" Radius="75%" ShowLastLabel="@ShowLastLabel">
                <CircularGaugeAxisLabelStyle Position="@GaugeLabelPosition" AutoAngle="true" Offset="@GaugeLabelOffset">
                    <CircularGaugeAxisLabelFont Size="10px"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLineStyle Width="2" Color="#9E9E9E"/>
                <CircularGaugeAxisMajorTicks Position="@GaugeMajorPosition" Color="#757575" Width="2" Offset="@GaugeMajorOffset" Height="@gaugeMajorHeight" Interval="20"/>
                <CircularGaugeAxisMinorTicks Position="@GaugeMinorPosition" Color="#757575" Width="2" Offset="@GaugeMinorOffset" Height="@GaugeMinorHeight" Interval="10"/>
                <CircularGaugePointers>
                    <CircularGaugePointer Type="PointerType.RangeBar" Value=145 Radius="60%" Color="#8BC34A" PointerWidth="7" RoundedCornerRadius="10">
                        <CircularGaugePointerAnimation Enable="false" Duration="0"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Angle="0" Radius="0%" ZIndex="1">
                        <ContentTemplate>
                            <div class="annotationText">145</div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr>
                    <td>
                        <div> Ticks </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@TickData" @bind-Value="@TickValue">
                                <DropDownListEvents TItem="LabelList" ValueChange="TickChange" TValue="string"/>
                                <DropDownListFieldSettings Text="Name" Value="TickValues"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div> Tick Position </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@TickPositionData" @bind-Value="@TickPositionValue">
                                <DropDownListEvents TItem="TickPositionList" ValueChange="TickPositionChange" TValue="string"/>
                                <DropDownListFieldSettings Text="Name" Value="TickPositionValues"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div> Label Position </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@LabelPositionData" @bind-Value="@LabelPositionValue">
                                <DropDownListEvents TItem="LabelPositionList" ValueChange="LabelPositionChange" TValue="string"/>
                                <DropDownListFieldSettings Text="Name" Value="LabelPositionValues"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Tick Offset <span class="value">@TickOffsetText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@TickOffsetValue" min="0" max="50" @onchange="TickOffsetChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Tick Height <span class="value">@TickHeightText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@TickHeightValue" min="1" max="50" @onchange="TickHeightChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Label Offset <span class="value">@LabelOffsetText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@LabelOffsetValue" min="0" max="50" @onchange="LabelOffsetChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Show Last Label </div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="LastLabelChange" Checked="@LastLabelChecked" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<style>
    td {
        width: 40%;
    }
    tr{
        height:40px;
    }
    .value{
        margin-left:10px;
    }
    .annotationText{
        color:#518C03;
        font-size:20px;
        font-family:Segoe UI;
        font-weight:semibold;
        margin-left:-20px;
        margin-top:-20px
    }
</style>

@code {
    private Position GaugeMinorLabelPosition = Position.Outside;
    private Position GaugeLabelPosition = Position.Outside;
    private Position GaugeMajorLabelPosition = Position.Outside;
    private Position GaugeMajorPosition = Position.Inside;
    private Position GaugeMinorPosition = Position.Inside;
    private Position TicksMajorPosition = Position.Inside;
    private Position TicksMinorPosition = Position.Inside;
    private bool ShowLastLabel;
    private double GaugeMajorOffset;
    private double GaugeMinorOffset;
    private double gaugeMajorHeight = 10;
    private double GaugeMinorHeight = 5;
    private double GaugeLabelOffset;
    private string TickValue = "major";
    private string LabelPositionValue = "Outside";
    private string MajorLabelPositionValue = "Outside";
    private string MinorLabelPositionValue = "Outside";
    private string TickPositionValue = "Inside";
    private string GaugeMajorTickPositionValue = "Inside";
    private string GaugeMinorTickPositionValue = "Inside";
    private double TickOffsetValue = 0;
    private double TickHeightValue = 10;
    private double LabelOffsetValue = 0;
    private bool LastLabelChecked;
    private double TickOffsetText = 0;
    private double TickHeightText = 10;
    private double LabelOffsetText = 0;
    public bool IsMajorTick = true;
    public class LabelList {
        public string TickValues { get; set; }
        public string Name { get; set; }
    }
    private List<LabelList> TickData = new List<LabelList> {
        new LabelList{TickValues="major" , Name = "Major Ticks"},
        new LabelList{TickValues="minor", Name = "Minor Ticks"},
    };
    public class TickPositionList {
        public string TickPositionValues { get; set; }
        public string Name { get; set; }
    }
    private List<TickPositionList> TickPositionData = new List<TickPositionList> {
        new TickPositionList{TickPositionValues="Inside" , Name = "Inside"},
        new TickPositionList{TickPositionValues="Outside", Name = "Outside"},
        new TickPositionList{TickPositionValues="Cross", Name = "Cross"}
    };
    public class LabelPositionList {
        public string LabelPositionValues { get; set; }
        public string Name { get; set; }
    }
    private List<LabelPositionList> LabelPositionData = new List<LabelPositionList> {
        new LabelPositionList{LabelPositionValues="Inside" , Name = "Inside"},
        new LabelPositionList{LabelPositionValues="Outside", Name = "Outside"},
        new LabelPositionList{LabelPositionValues="Cross", Name = "Cross"}
    };
    private void TickChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, LabelList> args) {
        TickValue = args.Value.ToString();
        if (TickValue == "major") {
            IsMajorTick = true;
            TickOffsetValue = GaugeMajorOffset;
            TickHeightValue = gaugeMajorHeight;
            TickOffsetText = GaugeMajorOffset;
            TickHeightText = gaugeMajorHeight;
            TickPositionValue = GaugeMajorTickPositionValue;
            GaugeLabelPosition = GaugeMajorLabelPosition;
            LabelPositionValue = MajorLabelPositionValue;
            TicksMajorPosition = GaugeMajorPosition;
        }
        else {
            IsMajorTick = false;
            TickOffsetValue = GaugeMinorOffset;
            TickHeightValue = GaugeMinorHeight;
            TickOffsetText = GaugeMinorOffset;
            TickHeightText = GaugeMinorHeight;
            TickPositionValue = GaugeMinorTickPositionValue;
            GaugeLabelPosition = GaugeMinorLabelPosition;
            LabelPositionValue = MinorLabelPositionValue;
            TicksMinorPosition = GaugeMinorPosition;
        }
    }
    private void TickPositionChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TickPositionList> args) {
        TickPositionValue = args.Value.ToString();
        if (IsMajorTick) {
            if (TickPositionValue == "Inside") {
                GaugeMajorPosition = Position.Inside;
            }
            else if (TickPositionValue == "Outside") {
                GaugeMajorPosition = Position.Outside;
            }
            else {
                GaugeMajorPosition = Position.Cross;
            }
            TicksMajorPosition = GaugeMajorPosition;
            GaugeMajorTickPositionValue = TickPositionValue;
        }
        else {
            if (TickPositionValue == "Inside") {
                GaugeMinorPosition = Position.Inside;
            }
            else if (TickPositionValue == "Outside") {
                GaugeMinorPosition = Position.Outside;
            }
            else {
                GaugeMinorPosition = Position.Cross;
            }
            TicksMinorPosition = GaugeMinorPosition;
            GaugeMinorTickPositionValue = TickPositionValue;
        }
    }
    private void LabelPositionChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, LabelPositionList> args) {
        LabelPositionValue = args.Value.ToString();
        if (IsMajorTick) {
            if (LabelPositionValue == "Inside") {
                GaugeLabelPosition = Position.Inside;
            }
            else if (LabelPositionValue == "Outside") {
                GaugeLabelPosition = Position.Outside;
            }
            else {
                GaugeLabelPosition = Position.Cross;
            }
            GaugeMajorLabelPosition = GaugeLabelPosition;
            MajorLabelPositionValue = LabelPositionValue;
        }
        else {
            if (LabelPositionValue == "Inside") {
                GaugeLabelPosition = Position.Inside;
            }
            else if (LabelPositionValue == "Outside") {
                GaugeLabelPosition = Position.Outside;
            }
            else {
                GaugeLabelPosition = Position.Cross;
            }
            GaugeMinorLabelPosition = GaugeLabelPosition;
            MinorLabelPositionValue = LabelPositionValue;
        }
    }
    private void TickOffsetChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        TickOffsetValue = Convert.ToDouble(args.Value);
        if (IsMajorTick) { GaugeMajorOffset = TickOffsetValue; }
        else { GaugeMinorOffset = TickOffsetValue; }
        TickOffsetText = TickOffsetValue;
    }
    private void TickHeightChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        TickHeightValue = Convert.ToDouble(args.Value);
        if (IsMajorTick) { gaugeMajorHeight = TickHeightValue; }
        else { GaugeMinorHeight = TickHeightValue; }
        TickHeightText = TickHeightValue;
    }
    private void LabelOffsetChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        LabelOffsetValue = Convert.ToDouble(args.Value);
        GaugeLabelOffset = LabelOffsetValue;
        LabelOffsetText = LabelOffsetValue;
    }
    private void LastLabelChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        LastLabelChecked = args.Checked;
        ShowLastLabel = args.Checked;
    }
}